// 使对话框可移动
export default (Vue) => {
  Vue.directive('drag', {
    inserted: function (el) {
      let odiv = el // 获取当前元素
      let flag = false
      const elDialog = odiv.getElementsByClassName('el-dialog')[0]
      elDialog.getElementsByClassName('el-dialog__header')[0].style.cursor = 'move'
      odiv.onmousedown = (e) => {
        if (e.target.className !== 'el-dialog__header') {
          return
        }
        e.preventDefault()
        flag = true
        // 算出鼠标相对元素的位置
        let disX = e.clientX - elDialog.offsetLeft
        let disY = e.clientY - elDialog.offsetTop

        odiv.onmousemove = (e) => {
          e.preventDefault()
          if (!flag) {
            return false
          }
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY

          // 移动当前元素
          elDialog.style.left = left + 'px'
          elDialog.style.top = top + 'px'
          elDialog.style.margin = '0px'
          elDialog.style.marginTop = '0px'
        }
        odiv.onmouseup = (e) => {
          e.preventDefault()
          if (!flag) {
            return false
          }
          odiv.onmousemove = null
          odiv.onmouseup = null
        }
      }
    }
  })
}
